<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<ui:composition xmlns="http://www.w3.org/1999/xhtml"
		xmlns:cc="http://java.sun.com/jsf/composite"
		xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:h="http://java.sun.com/jsf/html"
		xmlns:f="http://java.sun.com/jsf/core"
		xmlns:p="http://primefaces.org/ui">

		<cc:interface>
		
			<cc:attribute name="id" required="true" />
			<cc:attribute name="widgetVar" required="true" />
			<cc:attribute name="nome" required="true" />
			<cc:attribute name="email" required="true" />
			<cc:attribute name="avatar" required="true" />
			<cc:attribute name="sexo" />
			<cc:attribute name="biografia" />			
			<cc:attribute name="local" />			
			<cc:attribute name="dataNascimento" />
			<cc:attribute name="dataCadastro" />					

		</cc:interface>

		<cc:implementation>
		
			<p:dialog id="#{cc.attrs.id}"
				closable="true" appendToBody="true"
				widgetVar="#{cc.attrs.widgetVar}"
				resizable="false">
				
				<f:facet name="header">
					<h:outputText value="Perfil de #{cc.attrs.nome}" />
				</f:facet>
				
				<f:facet name="footer">
					<h:outputText value="Em breve novidades..." />
				</f:facet>				
				
				<h:form id="perfilForm">

					<h:panelGrid columns="3" columnClasses="topAlign, topAlign, topAlign">
					
						<h:graphicImage 
							value="resources/images/usuarios/#{cc.attrs.avatar}" 
							width="100" height="100" />							
						
						<p:spacer width="20" />
						
						<h:panelGrid columns="3">
							
							<h:outputText value="Nome:" style="font-weight: bold;" />
							<p:spacer width="10" />
							<h:outputText value="#{cc.attrs.nome}" />
							
							<h:outputText value="E-mail:" style="font-weight: bold;" />
							<p:spacer width="10" />
							<h:outputText value="#{cc.attrs.email}" />
							
							<h:outputText value="Local:" style="font-weight: bold;" />
							<p:spacer width="10" />
							<h:outputText value="#{cc.attrs.local}" />
							
							<h:outputText value="Nasceu em:" style="font-weight: bold;" />
							<p:spacer width="10" />
							<h:outputText value="#{cc.attrs.dataNascimento}">
								<f:convertDateTime pattern="dd/MM/yyyy" />
							</h:outputText>
							
							<h:outputText value="Cadastrado em:" style="font-weight: bold;" />
							<p:spacer width="10" />
							<h:outputText value="#{cc.attrs.dataCadastro}">
								<f:convertDateTime pattern="dd/MM/yyyy" />
							</h:outputText>
							
							<h:outputText value="Sexo:" style="font-weight: bold;" />
							<p:spacer width="10" />
							<h:panelGroup layout="block">
								<h:outputText rendered="#{cc.attrs.sexo eq 'M'}"
									value="masculino" />
								<h:outputText rendered="#{cc.attrs.sexo eq 'F'}"
									value="feminino" />
							</h:panelGroup>							
							
							<h:outputText value="Biografia:" style="font-weight: bold;" />
							<p:spacer width="10" />
							<h:panelGroup layout="block" style="width: 300px;">
								<h:outputText value="#{cc.attrs.biografia}" />
							</h:panelGroup>
					
						</h:panelGrid>
						
					</h:panelGrid>
				
				</h:form>
			
			</p:dialog>
			
		</cc:implementation>

</ui:composition>